'use client';

import Image from 'next/image';
import Link from 'next/link';
import classNames from 'classnames';
import { getUserAvatar } from '@/lib/tool';
import type { IPostClientDetails } from '@/interfaces';
import type { TMetadata } from '@/types';
import useContentLayer from '@/hooks/useContentLayer';
import ButtonAreaPostIdPage from '@/app/[locale]/posts/[id]/buttonArea';
import Outline from '@/app/[locale]/posts/[id]/edit/outline';
import { useTranslations } from 'use-intl';

export default function Content({
  postData,
  metadata,
}: {
  postData: IPostClientDetails;
  metadata: TMetadata;
}) {
  const t = useTranslations('PostIdPage');
  const env = metadata.env;

  useContentLayer({
    dep: postData.content,
    metadata,
  });

  return (
    <div className="row overflow-hidden">
      <div className="col-12 col-lg-2 d-none d-lg-block pe-0">
        <div
          className="card h-100 border-0 rounded-0 vstack gap-2"
          style={{
            borderBottomLeftRadius: '0.376rem !important',
          }}
        >
          <div
            className="align-self-center my-4"
            style={{ width: 128, height: 128 }}
          >
            <Image
              priority
              className="rounded-circle card-img-top"
              src={getUserAvatar(postData.user, metadata).mediumAvatarUrl}
              alt={postData.user.alias}
              title={postData.user.alias}
              width={128}
              height={128}
              placeholder="blur"
              blurDataURL={env.APP_BLUR_DATA_URL}
              style={{
                maxWidth: '100%',
                objectFit: 'cover',
              }}
            />
          </div>
          <div className="card-body align-self-center text-center">
            <h5 className="card-title">
              <Link
                href={
                  postData.user.id ? `/users/${postData.user.id}` : '/login'
                }
                className="text-reset link-underline-light link-offset-3 link-underline-opacity-0 link-underline-opacity-100-hover"
              >
                {postData.user.alias}
              </Link>
            </h5>

            <p className="card-text my-3">
              {postData.user.roles
                .filter((item) => !item.hide)
                .map((item) => item.name)
                .join(' / ')}
            </p>
          </div>
          <div className="card-footer border-top-0 border-bottom border-secondary border-opacity-10">
            <small className="text-muted" title="内容更新时间">
              {t('lastUpdated')}&nbsp;
              <time
                className={classNames(
                  postData.basic._contentUpdatedOnText ? false : 'invisible',
                )}
                dateTime={postData.basic.contentUpdatedOn}
              >
                {postData.basic._contentUpdatedOnText}
              </time>
            </small>
          </div>
        </div>
      </div>
      <div className="col-auto border-1 px-0 border-secondary border-opacity-10 border-end"></div>
      <div className="col col-lg-9 flex-grow-1 ps-0">
        <div
          className="card border-0 border-secondary border-opacity-10 rounded-0 h-100 border-bottom"
          style={{
            borderBottomRightRadius: '0.376rem !important',
          }}
        >
          <div className="card-body">
            {postData.basic.contentType === 'DEFAULT' && (
              <>
                <Outline content={postData.content} />

                <div
                  className="clearfix content-layer text-break"
                  dangerouslySetInnerHTML={{ __html: postData.content }}
                ></div>
              </>
            )}

            <ButtonAreaPostIdPage
              id={postData.basic.id}
              name={postData.basic.name}
              like={postData.isLike}
              likeNum={postData.details.likeCount}
              follow={postData.isFollow}
              followNum={postData.details.followCount}
              favourite={postData.isFavourite}
              favouriteNum={postData.details.favoriteCount}
            />

            {postData.basic.statement && (
              <div className="my-5">
                <p className="text-muted">{postData.basic.statement}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
